<template>
  <!--
    Loading状态 => 禁止关闭
        :close-on-click-modal="!loading"
        :close-on-press-escape="!loading"
        :show-close="!loading"
  -->
  <basic-dialog
    class="basic-dialog"
    :visible="visible"
    :title="pageTitle"
    :width="576"
    :close-on-click-modal="!loading"
    :close-on-press-escape="!loading"
    :show-close="!loading"
    @close="handleClosed"
    @open="handleDialogOpen"
    @handle-confirm="handleSubmit"
  >
    <el-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      class="w-full"
      label-width="60"
      label-position="left"
      require-asterisk-position="right"
    >
      <el-form-item :label="$t('user.dialog.account')" prop="username">
        <el-input
          v-model="formState.username"
          maxlength="18"
          show-word-limit
          :placeholder="$t('user.placeholder.account')"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('user.dialog.password')" prop="password">
        <el-input
          v-model="formState.password"
          :placeholder="$t('user.placeholder.password')"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('user.dialog.email')" prop="email">
        <el-input
          v-model="formState.email"
          :placeholder="$t('user.placeholder.email')"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('user.dialog.status')" prop="status">
        <basic-switch
          v-model="formState.status"
          size="small"
          :active-value="1"
          :inactive-value="2"
        />
      </el-form-item>
      <el-form-item :label="$t('user.dialog.desc')" prop="description">
        <el-input
          v-model.trim="formState.description"
          :autosize="{ minRows: 5, maxRows: 5 }"
          resize="none"
          maxlength="500"
          show-word-limit
          type="textarea"
          :placeholder="$t('common.global.input')"
        ></el-input>
      </el-form-item>
    </el-form>
    <!--
      <template #footer>
      <el-button :loading="loading" type="primary" @click="handleSubmit">{{
        record?.id ? '修改' : '创建'
      }}</el-button>
      <el-button :loading="loading" @click="emit('update:visible', false)"
        >取消</el-button
      >
    </template>
     -->
  </basic-dialog>
</template>

<script setup lang="ts">
import { type FormInstance, type FormItemRule } from 'element-plus'
import { cloneDeep } from 'lodash-es'

import type { UserModel } from '@/apis/model/user'

interface IFormState {
  username: string
  password: string
  email: string
  phone: string
  website: string
  status: number
  description: string
}

interface IProps {
  visible: boolean
  record?: UserModel | undefined | null
  loading?: boolean
}
interface IEmits {
  // 更新 显示状态
  (event: 'update:visible', value: boolean): void
  // 更新 loading状态
  (event: 'update:loading', value: boolean): void
  // 更新 数据
  (event: 'update:record', value?: UserModel): void
  // 通知上层更新
  (event: 'reload'): void
}

const emit = defineEmits<IEmits>()
const props = withDefaults(defineProps<IProps>(), {})
const pageTitle = computed(() =>
  props.record?.id
    ? useI18nContent('user.dialog.edit_user')
    : useI18nContent('user.dialog.add_user')
)

const formRef = ref<FormInstance>()

const formState = ref({
  username: '',
  password: '',
  email: '',
  phone: '',
  website: '',
  status: 1,
  description: ''
})
/**
 * 需要了解 Ts里面的 keyof, Pick, Omit 语法
 * keyof Pick<IFormState, 'username' | 'email' | 'website'>挑选出 'username' | 'email' | 'website' 做验证
 * keyof Omit<IFormState, 'phone' | 'description'> 挑选出 'phone' | 'description' 不做验证
 * keyof IFormState 验证所有
 */
const rules: Record<
  keyof Pick<IFormState, 'username' | 'password' | 'email'>,
  FormItemRule[]
> = {
  username: [
    {
      required: true,
      message: useI18nContent('user.placeholder.account'),
      trigger: 'blur'
    },
    {
      min: 2,
      max: 18,
      message: useI18nContent('user.rules.rule'),
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      type: 'email',
      message: useI18nContent('user.placeholder.password'),
      trigger: 'blur'
    }
  ],
  email: [
    {
      required: true,
      type: 'email',
      message: useI18nContent('user.placeholder.email'),
      trigger: 'blur'
    }
  ]
}
/**
 * 保存方法
 */
const handleSubmit = async () => {
  if (!formRef.value) return
  await formRef.value.validate()
  emit('update:loading', true)
  // 模拟接口
  setTimeout(() => {
    ToastUtils.success(useI18nContent('common.toast.operation_success'))
    emit('reload')
    emit('update:loading', false)
  }, 1000)
}

/**
 * @description dialog 打开事件
 */
const handleDialogOpen = () => {
  if (props.record?.id) {
    formState.value = cloneDeep(props.record)
  }
}

/**
 * @description dialog 关闭前事件
 */
const handleClosed = () => {
  emit('update:record', undefined)
  emit('update:visible', false)
  formRef.value?.resetFields()
}
</script>
